<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./data.js"></script>
    <script src="./jq-3.6.0.js"></script>
    <style>
        .main {
            display: flex;
            height: 200px;
        }
        
        .menu {
            flex: 1;
        }
        
        .goods {
            flex: 2;
            overflow: auto;
        }
        
        .menu>.item {
            height: 50px;
            line-height: 50px;
            text-align: center;
        }
        
        .goods>.item {
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: green;
        }
    </style>
</head>

<body style="margin: 0px;">
    <div class="main">
        <div class="menu"></div>
        <div class="goods"></div>
    </div>
</body>
<script>
    $(function() {
        createMenu(menuList);
        createGoods(goodsList)
    })

    function createMenu(data) {
        $.each(data, function(i, e) {
            var itemDiv = $('<div class="item"></div>')
            itemDiv.html(e.name);
            itemDiv.attr('data-menu-id', e.id);
            itemDiv.on('click', function() {
                pull($(this).attr('data-menu-id'));
            })
            $('.menu').append(itemDiv);
        })
    }

    function createGoods(data1) {
        $.each(data1, function(i, e) {
            var itemDiv = $('<div class="item"></div>')
            itemDiv.html(e.name);
            itemDiv.addClass('menu' + e.menuId)
            $('.goods').append(itemDiv);
        })
        $.each(menuList, function(i, e) {
            $('.menu' + e.id)[0];
            var itemDiv = $('<div class="item" style="background-color:pink;"></div>')
            itemDiv.addClass('menu' + e.id)
            itemDiv.html(e.name);
            $($('.menu' + e.id)[0]).before(itemDiv);
        })
    }

    function pull(id) {
        $('.menu' + id)[0];
        //获取当前元素到页面中的距离
        var pageTop = $($('.menu' + id)[0]).offset().top;
        console.log('获取当前元素到页面中的距离:' + $($('.menu' + id)[0]).offset().top);
        $('.goods').scrollTop(pageTop + $('.goods').scrollTop());
        //已经卷上去的距离
        console.log('已经卷上去的距离:' + $('.goods').scrollTop());
    }
</script>

</html>